<!DOCTYPE html>
<html>
<head>
  <title>华工海外购</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="../css/css_reset.css"/>
  <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
  <div class="wrapper">
    <div class="head">
      <div class="nav_first">
        <ul class="list_1">
          <li>
            <a href="#">在线客服</a>
          </li>
          <li>
            <a href="#">客服电话：666423</a>
          </li>
        </ul>
        <ul class="list_2">
          <li>
            <a href="#">常见问题</a>
          </li>
          <li>
            <a href="#">立即登陆</a>
          </li>
          <li>
            <a href="#">免费注册</a>
          </li>
          <li>
            <a href="#">首页</a>
          </li>
        </ul>
      </div>
      <div class="nav_second">
        <form>
          <input type="text" class="search-input-text" />
          <input type="submit" class="search-input-button"  value="" />
        </form>
      </div>
    </div>
    <div class="header">
      <div class="imgbox">
        <ul>
          <li style="display: block;" lunbo-title="全球最鲜护肤TOP10">
            <a href="#">
              <img src="./src/1.png" />
            </a>
          </li>
          <li lunbo-title="欧美轻奢低价淘">
            <a href="#">
              <img src="./src/2.png" />
            </a>
          </li>
          <li lunbo-title="全球最时髦球鞋TOP10">
            <a href="#">
              <img src="./src/3.png" />
            </a>
          </li>
          <li lunbo-title="全球最好吃的下午茶">
            <a href="#">
              <img src="./src/4.png" />
            </a>
          </li>
        </ul>
        <div class="title_bg common">
          <!--图片标题背景--> </div>
        <!--图片显示标题-->
        <div class="lunbo-title common"></div>
        <!--图片序号-->
        <div class="pager common">
          <ul>
            <li>4</li>
            <li>3</li>
            <li>2</li>
            <li style="background: #FF70Ad;">1</li>
          </ul>
        </div>
      </div>
    </div>
    <br/>
    <br/>
    <div class="Iframe1">
      <iframe src="LeftIframe.html" frameborder="0" width="250px" height="750px" scrolling="no" name="frame1" ></iframe>
    </div>
    <div class="Iframe2">
      <iframe src="RightIframe.html" frameborder="0" width="1010px" height="750px" scrolling="no"name="frame2"></iframe>
    </div>
    <div class="footer">
      <div class="friend_link">
        <p>
          友情链接
          <a href="http://www.mogujie.com/taoshijie/index?f=baidusem_ry52ov0fd9" target="_blank">蘑菇街</a>
          <a href="http://www.gou.com/?cps=bdjjquanqiugou"target="_blank">麦乐购</a>
          <a href="http://www.secoo.com/?utm_source=baidu_pc&utm_medium=cpc&utm_content=ribendaigouwang&from=sem_baidu_ribenzhan"target="_blank">寺库</a>
          <a href="http://www.jd.hk/"target="_blank">京东全球购</a>
          <a href="https://www.tmall.hk/?spm=875.7789098.2015006.8.yCW2oj&acm=lb-zebra-17931-286934.1003.8.431511&scm=1003.8.lb-zebra-17931-286934.OTHER_14461005113267_431511"target="_blank">天猫国际</a>
        </p>
      </div>
      <div class="part1">
        <p>
          公司介绍
          <a href="#">安全保障</a>
          <a href="#">媒体报道</a>
          <a href="#">合作伙伴</a>
          <a href="#">联系我们</a>
        </p>
      </div>
      <div class="part2">
        <p>
          客户服务
          <a href="#">在线客服</a>
          <a href="http://weibo.com/"target="_blank">新浪微博</a>
          <a href="http://t.qq.com/"target="_blank">腾讯微博</a>
          <a href="https://wx.qq.com/"target="_blank">微信</a>
        </p>
      </div>
      <div class="authority">
        <p>
          <span class="f1">@2015</span>
          <span class="f2">All rights reserved |</span>
          <span class="f3">|  ICP备1332620号-1</span>
        </p>
      </div>
      <div class="logo">
        <p>
          <span>
            <img src="./src/f1.png"></span>
          <span>
            <img src="./src/f2.png"></span>
          <span>
            <img src="./src/f3.png"></span>
          <span>
            <img src="./src/f4.png"></span>
        </p>
      </div>
    </div>
  </div>

  <script type="text/javascript" charset="utf-8" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
  $(window).on("scroll",function(){
      if($(window).scrollTop()>350){
        $(".to-top").show();
      }else{
        $(".to-top").hide();
      }
    })
    $(".to-top").on("mouseenter",function(){
      $(this).find("img").attr("src","./src/top2.png");
    })
    $(".to-top").on("mouseleave",function(){
      $(this).find("img").attr("src","./src/top1.png");
    })

   // 图片轮播
    $(document).ready(function () {
            (new CenterImgPlay()).Start();
        });
        function CenterImgPlay() {
            this.list = $(".imgbox").children(":first").children();
            this.indexs = [];
            this.length = this.list.length;
            //图片显示时间
            this.timer = 3000;
            this.showTitle = $(".lunbo-title");

            var index = 0, self = this, pre = 0, handid, isPlay = false, isPagerClick = false;

            this.Start = function () {
                this.Init();
                //计时器，用于定时轮播图片
                handid = setInterval(self.Play, this.timer);
            };
            //初始化
            this.Init = function () {
                var o = $(".pager ul li"), _i;

                for (var i = o.length - 1, n = 0; i >= 0; i--, n++) {
                    this.indexs[n] = o.eq(i).click(self.PagerClick);
                }
            };
            this.Play = function () {
                isPlay = true;
                index++;
                if (index == self.length) {
                    index = 0;
                }
                //先淡出，在回调函数中执行下一张淡入
                self.list.eq(pre).fadeOut(300, "linear", function () {
                    var info = self.list.eq(index).fadeIn(500, "linear", function () {
                        isPlay = false;
                        if (isPagerClick) { handid = setInterval(self.Play, self.timer); isPagerClick = false; }
                    }).attr("lunbo-title");
                    //显示标题
                    self.showTitle.text(info);
                    //图片序号背景更换
                    self.indexs[index].css("background-color", "#FF70Ad");
                    self.indexs[pre].css("background-color", "#6f4f67");

                    pre = index;
                });
            };
            //图片序号点击
            this.PagerClick = function () {
                if (isPlay) { return; }
                isPagerClick = true;

                clearInterval(handid);

                var oPager = $(this), i = parseInt(oPager.text()) - 1;

                if (i != pre) {
                    index = i - 1;
                    self.Play();
                }
            };
        };
</script>
<script type="text/javascript">
  


</script>
</body>
</html>